<template>
    <div class="app-container">

        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="50px">
            <el-form-item label="网关" prop="gatewayId">
                <gateway-select2 @changeGateway="changeGateway"/>
            </el-form-item>
        </el-form>

<!--        <div id="curve-chart" style="height: 800px"></div>-->

<!--        <my-line-chart title="实时曲线" :chart-data="dataMap" :xAxisData="echartsX"/>-->


        <div :key="index" v-for="(item, index) in dataList">
            <div class="chart-wrapper">
                <my-line-chart :title="item.title" :chart-data="item.dataMap" :xAxisData="item.echartsX"/>
            </div>
        </div>

    </div>
</template>

<script>
import {getSensorRealTimeData} from '@/api/system/realtime'
import {mapGetters} from 'vuex'

import gatewaySelect2 from '../../common/gatewaySelect2'
import MyLineChart from "../../dashboard/MyLineChart";

export default {
    name: 'Realtime',
    components: {
      gatewaySelect2,
        MyLineChart
    },
    data() {
        return {
          showSearch: true,
            queryParams: {
                projectId: '',
                gatewayId: 0,
                sensorId: 0,
                timeIntervalId: 1,
                beginTime: '',
                endTime: ''
            },
            sensorList: [
                {value: 0, label: '全部'}
            ],
            gatewayMapping: {},
            gatewayList: [],
            echartsX: [],
            echartsDataList: [],
            echartsLegendList: [],
            curveChart: null,
            timer: null,

            dataList: []
        }
    },
    created() {

    },
    computed: {
        ...mapGetters([
            'projectId'
        ])
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    mounted() {
        // let _this = this
        // window.addEventListener("resize", function () {
        //     if (_this.curveChart == null) {
        //         _this.curveChart = _this.$echarts.init(document.getElementById('curve-chart'))
        //     }
        //     _this.curveChart.resize()
        // })

        this.intervalGetData()
    },
    methods: {



      // 接收子组件传递的消息
      changeGateway(obj) {

        console.log(obj)

        this.gatewayList = obj.gatewayListOption
        this.queryParams.projectId = obj.projectId
        this.queryParams.gatewayId = obj.gatewayId

        this.getGatewayByProjectId()
      },


        intervalGetData() {
            // 每隔3秒执行一次countTime方法
            // 1000 * 60 * 5
            if (this.timer) {
                clearInterval(this.timer)
            } else {
                this.timer = setInterval(this.getAllGatewayByProjectId, 1000 * 60 * 5)
            }
        },

        getGatewayByProjectId() {

          if (this.projectId == null) {
            return;
          }

          this.getSensorRealTimeMethod()

            // 根据项目id查询网关
            // allGateway(this.projectId).then(response => {
            //     let i = 0
            //     for (let item of response.data) {
            //         let temp = {'value': 0, 'label': ''}
            //         temp['value'] = item.gatewayId
            //         temp['label'] = item.gatewayName
            //         this.gatewayList.push(temp)
            //         this.gatewayMapping[item.gatewayId] = item.gatewayNumber
            //         // 把第一个网关默认选中
            //         if (i === 0) {
            //             sessionStorage.setItem("gatewayNumber", item.gatewayNumber)
            //             // 网关id
            //             // this.queryParams.gatewayId = item.gatewayId
            //             this.queryParams.projectId = id
            //             // 根据网关id查询传感器列表
            //             // getSensorListByGatewayId(parseInt(item.gatewayId)).then(response => {
            //             //   for (let item of response.data) {
            //             //     let temp = { 'value': 0, 'label': '' }
            //             //     temp['value'] = item.sensorId
            //             //     temp['label'] = item.sensorName
            //             //     this.sensorList.push(temp)
            //             //   }
            //             //
            //             // })
            //
            //         }
            //         ++i
            //     }
            // })

        },
        selectHistory() {
            this.$refs.queryForm.validate(valid => {
                if (valid) {
                    this.$refs.timeRef.validate(valid => {
                        if (valid) {
                            this.getSensorHistoryMethod()
                        }
                    })
                }
            })
        },
        getSensorRealTimeMethod() {
            // getSensorRealTimeData(this.queryParams).then(response => {
            //     this.echartsX = response.data.echartsX
            //     this.echartsDataList = []
            //     this.echartsLegendList = []
            //     for (let item in response.data.dataMap) {
            //         if (response.data.dataMap.hasOwnProperty(item)) {
            //             this.echartsDataList.push({
            //                 name: item,
            //                 type: 'line',
            //                 data: response.data.dataMap[item]
            //             })
            //             this.echartsLegendList.push(item)
            //         }
            //     }
            //     this.drawLine()
            // })

            this.dataList = []

            getSensorRealTimeData(this.queryParams).then(response => {

                let echartsX = response.data.echartsX

                let item = {
                    'title': '模拟数据',
                    'echartsX': [
                        '2020-10-01 10:00:00',
                        '2020-10-01 10:15:00',
                        '2020-10-01 10:30:00',
                        '2020-10-01 10:45:00',
                        '2020-10-01 11:00:00',
                        '2020-10-01 11:15:00',
                        '2020-10-01 11:30:00',
                        '2020-10-01 11:45:00',
                        '2020-10-01 12:00:00',
                        '2020-10-01 12:15:00'
                    ],
                    'dataMap': {
                        'data': [
                            5, 7, 9, 8, 11, 15, 16, 4, 20, 13
                        ]
                    }
                }

                if (echartsX.length > 0) {
                    item = {
                        'title': '',
                        'echartsX': echartsX,
                        'dataMap': response.data.dataMap
                    }
                }

                this.dataList.push(item)
            })

        },
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let curveChart = this.$echarts.init(document.getElementById('curve-chart'))
            this.curveChart = curveChart

            // 绘制图表
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: this.echartsLegendList
                },
                grid: {
                    left: '8%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        // x轴点与点之间的距离,隔几个
                        //interval: 5,
                        // 倾斜
                        rotate: 50
                    },
                    data: this.echartsX
                },
                yAxis: {
                    type: 'value'
                },
                series: this.echartsDataList
            }
            curveChart.setOption(option, true)
        }
    }
}
</script>

<style scoped>

</style>
